<!-- 269 -->
<template>
  <div>
    <a-space class="common-button-group">
      <a-button type="primary" :loading="searchBtnLoading" @click="handleSearch">{{ $t('common_query') }}</a-button>
    </a-space>
    <t-query-form layout="inline"
      ref="queryForm"
      group="ViewBoxPalletReceiveInformation"
      :model="queryForm"
      >
          <a-form-item :label="$t('T9_type')" name="type" prop="type" :rules="{ required: true, message: $t('T9_type'), trigger: 'change'}">
            <a-select v-model:value="queryForm.type" class="t9-form-wideget-input-default" show-search allow-clear>
              <a-select-option v-for="item in typeArr"
              :key="item.value" :value="item.value">
              {{item.value}}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('T9_productId')" name="productId"  prop="productId" >
            <a-select v-model:value="queryForm.productId" class="t9-form-wideget-input-default" show-search allow-clear>
              <a-select-option v-for="item in productIdArr"
              :key="item.productId" :value="item.productId">
              {{item.productId}}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('T9_receiveFlag')" name="state">
            <a-select v-model:value="queryForm.receiveFlag" class="t9-form-wideget-input-default" show-search allow-clear>
              <a-select-option v-for="item in receiveFlagArr"
              :key="item.value" :value="item.value">
              {{item.value}}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
            :label="$t('T9_date')"
            name="Date"
            prop="Date"
            :rules="{ required: true, message: $t('T9_date') }"
          >
            <a-range-picker
              :show-time="{ format: 'HH:mm:ss' }"
              :default-value="queryForm.Date"
              format="YYYY-MM-DD HH:mm:ss"
              style="width:100%"
              @ok="onChange"
            />
          </a-form-item>
    </t-query-form>
    <a-row type="flex" justify="space-between" align="middle" class="global-oper-row mt-2">
      <a-col :span="15" class="global-oper-row-title">{{ $t('T9_shipList') }}</a-col>
      <a-col :span="8" class="global-oper-row-extra">
        <a-button @click="exportExl" type="primary">{{ $t('T9_toExcel') }}</a-button>
      </a-col>
    </a-row>
    <t-table align="center"
      :data="table.list"
    >
      <t-column min-width="100" field="palletId" :title="$t('T9_BoxPalletId')" />
      <t-column min-width="100" field="type" :title="$t('T9_type')" />
      <t-column min-width="100" field="grade" :title="$t('T9_grade')" />
      <t-column min-width="100" field="state" :title="$t('T9_state')" />
      <t-column min-width="100" field="owner" :title="$t('T9_owner')" />
      <t-column min-width="100" field="ownerType" :title="$t('T9_ownerType')" />
      <t-column min-width="100" field="productId" :title="$t('T9_productId')" />
      <t-column min-width="100" field="productVer" :title="$t('T9_productVer')" />
      <t-column min-width="100" field="panelQty" :title="$t('T9_panelQty')" />
      <t-column min-width="100" field="route" :title="$t('T9_route')" />
      <t-column min-width="100" field="operation" :title="$t('T9_operation')" />
      <t-column min-width="100" field="desitinationShopId" :title="$t('T9_desitinationShopId')" />
    </t-table>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
  import moment from 'moment'
  import { downloadBlobFile } from '@/utils/download'
  import {
    getList
  } from '@/api/common'
  import { getProductId } from '@/api/viewShippedBoxPalletInformation'
  import { getCurrentDate } from '@/utils/utils'

  export default defineComponent({
    name: 'ViewBoxPalletReceiveInformation',
    components: {},
    data() {
      return {
        searchBtnLoading: false,
        table: {
          list: []
        },
        typeArr: [
          { value: 'Pallet' },
          { value: 'Box' }
        ],
        productIdArr: [],
        receiveFlagArr: [
          { value: 'RECEIVEFLAG' },
          { value: 'Custom' }
        ],
        queryForm: {
          type: '',
          productId: '',
          receiveFlag: '',
          Date: []
        }
      }
    },
    computed: {},
    watch: {},
    created() {
      this.getProductId()
      this.queryForm.Date = [moment(getCurrentDate(), 'YYYY-MM-DD HH:mm:ss'), moment(getCurrentDate(1), 'YYYY-MM-DD HH:mm:ss')]
    },
    methods: {
      onChange(value, dates) {
        this.queryForm.Date = value
        console.log('Selected Time: ', value)
        console.log('Formatted Selected Time: ', dates)
      },
      exportExl() {
        if (this.table.list.length) return
        const parmas = {
          dtoName: 'ViewBoxPalletReceiveInformationDTO',
          startTime: this.queryForm.Date.length !== 0 ? this.queryForm.Date[0].format('YYYYMMDDHHmmss') * 1000000 : null,
          endTime: this.queryForm.Date.length !== 0 ? this.queryForm.Date[1].format('YYYYMMDDHHmmss') * 1000000 : null,
          productId: this.queryForm.productId,
          type: this.queryForm.type,
          receiveFlag: this.queryForm.receiveFlag,
          queryId: 'GetShipList',
          version: '80001',
          menuName: 'viewBoxPalletReceiveInformation',
          usage: 'queryShipList',
          export: true
        }
        getList(parmas).then(res => {
          downloadBlobFile(res, 'shipList')
        })
      },
      getList() {
        const obj = {
          dtoName: 'ViewBoxPalletReceiveInformationDTO',
          startTime: this.queryForm.Date.length !== 0 ? this.queryForm.Date[0].format('YYYYMMDDHHmmss') * 1000000 : null,
          endTime: this.queryForm.Date.length !== 0 ? this.queryForm.Date[1].format('YYYYMMDDHHmmss') * 1000000 : null,
          productId: this.queryForm.productId,
          type: this.queryForm.type,
          receiveFlag: this.queryForm.receiveFlag,
          queryId: 'GetShipList',
          version: '80001',
          menuName: 'viewBoxPalletReceiveInformation',
          usage: 'queryShipList'
        }
        getList(obj).then(res => {
          this.table.list = res
        })
      },
      handleSearch() {
        this.$refs.queryForm.validate().then(() => {
          this.getList()
        })
      },
      getProductId() {
        const params = {
          shopId: 'CELL'
        }
        getProductId(params).then(res => {
          this.productIdArr = res
        })
      }
    }
  })
</script>
<style lang="less" scoped>
.t9-form-wideget-input-default {
  width: 150px;
}
</style>
